<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>20150310_组织结构图</title>
    <link rel="stylesheet" href="css/jquery.jOrgChart.css"/>
</head>
<body>
<ul id="org" style="display:none">
    <li>
        Food
        <ul>
            <li id="beer">Beer</li>
            <li>Vegetables
                <a href="http://wesnolte.com" target="_blank">Click me</a>
                <ul>
                    <li>Pumpkin</li>
                    <li>
                        <a href="http://tquila.com" target="_blank">Aubergine</a>

                        <p>A link and paragraph is all we need.</p>
                    </li>
                </ul>
            </li>
            <li class="fruit">Fruit
                <ul>
                    <li>Apple
                        <ul>
                            <li>Granny Smith</li>
                        </ul>
                    </li>
                    <li>Berries
                        <ul>
                            <li>Blueberry</li>
                            <li><img src="images/raspberry.jpg" alt="Raspberry"/></li>
                            <li>Cucumber</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>Bread</li>
            <li class="collapsed">Chocolate
                <ul>
                    <li>Topdeck</li>
                    <li>Reese's Cups</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
<div id="chart" class="orgChart"></div>

<script type="text/javascript" src="//cdnjscn.b0.upaiyun.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/jquery.jOrgChart.js"></script>
<script>
    jQuery(document).ready(function () {
        $("#org").jOrgChart({
            chartElement: '#chart',
            dragAndDrop: true
        });
    });
</script>
</body>
</html>